import "./Login.scss"
import React from 'react'
import { useNavigate } from "react-router-dom"
import { Button, Form, Input, Card, Row, Col } from 'antd'
import { UserOutlined,LockOutlined } from "@ant-design/icons"
function Login() {
  const navigate = useNavigate()
  const onFinish = (val) =>{
    // 发起登录请求
    navigate('/')
  }
  return (
    <div className='Login'>
      <Row className='loginContainer' justify='center' align="middle" >
        <Col span={8}>
          <Card
            title="欸嘿的后台管理系统"
            bordered={false}
            style={{
              width: 300,
            }}
          >
            <Form name='normal_login' className='login-form' initialValues={{
              username: 'admin',
              password: '123456'
            }}
            onFinish={onFinish}
            >
              <Form.Item name="username" rules={[{
                required: true,
                message: '请输入用户名'
              }]}>
                <Input placeholder='请输入用户名' prefix={<UserOutlined/>}></Input>
              </Form.Item>
              <Form.Item name="password" rules={[{
                required: true,
                message: '请输入密码'
              }]}>
                <Input placeholder='请输入密码' prefix={<LockOutlined/>}></Input>
              </Form.Item>
              <Form.Item >
                <Button type="primary" htmlType="submit" className="login-form-button" block>登录</Button>
              </Form.Item>
            </Form>
          </Card>
        </Col>
      </Row>


    </div>
  )
}
export default Login